import React from 'react'
import './index.less'
import http from 'libs/http'

const stripeArr = []
stripeArr.length = 20
stripeArr.fill(undefined)

export default class extends React.Component {
  constructor() {
    super()
    this.state = {
      wrongList: [],
    }
  }

  componentDidMount() {
    const { examId } = this.props.match.params
    this.setState({ examId }, this.getExamWrongList)
  }

  getExamWrongList = () => {
    const { examId } = this.state
    const shoeErrorNotice = true
    http.get('/student/business/getExamWrongList', { examId }, undefined, shoeErrorNotice).then(res => {
      const wrongList = res.data
      this.setState({ wrongList })
    })
  }

  handleClose = () => {
    this.props.history.push('/student_center/my_courses/layout/live_course_list')
  }

  render() {
    const { wrongList=[] } = this.state
    return (
      <div className="error-book-container">
        <div>
          <div className="error-book-head"><span className="error-book-title"></span></div>
          <div className="error-book-wrap">
            <span className="error-book-close" onClick={this.handleClose}></span>
            
            <div className="error-book">
              {/* <div className="single-choice error-item">
                <span className="question-type">1. 单项选择题</span>
                <span className="question">Lily was so ____ looking at the picture that she forgot the tim</span>
                <ul>
                  <li className="is-right"><p>A</p>.<p>AAAAAAAAAA</p></li>
                  <li className="is-wrong"><p>B</p>.<p>BBBBBBBBBB</p></li>
                  <li className="is-wrong"><p>C</p>.<p>CCCCCCCCCC</p></li>
                </ul>
              </div> */}
              {/* <div className="fill-blank error-item">
                <span className="question-type">2. 填空题</span>
                <span className="question">It's a nice day. ____we go for a walk?</span>
                <div className="answer-con">
                  <p className="is-wrong">你的答案：are</p>
                  <div className="right-answer">
                    <p>正确答案</p>
                    <p>B.careful</p>
                  </div>
                </div>
              </div> */}
              {
                wrongList.map((item, index) => {
                  if(item.type===1) {
                    return <div className="single-choice error-item" key={index}>
                      {/* <span className="question-type">{index+1}. 单项选择题</span> */}
                      <span className="question">{index+1}. {item.question}</span>
                      <ul className="item-options">
                        {
                          item.optionList.map((option, innerIndex) => {
                            const { code } = option
                            const isRight = code === item.answer ? 'is-wrong' : ''; 
                            return <li className={isRight} key={innerIndex}><p>{option.code}</p>.<p>{option.desc}</p></li>
                          })
                        }
                      </ul>
                      {
                        item.optionList.map((option, innerIndex) => {
                          const { code } = option
                          if(code === item.rightAnswer){
                            return (<div className="right-answer" key={innerIndex}>
                                      <p>正确答案</p>
                                      <p>{item.rightAnswer}.{option.desc}</p>
                                    </div>)
                          }else{
                            return null;
                          }
                        })
                      }

                    </div>
                  }
                  else if(item.type===2) {
                    // return <div className="fill-blank" key={index}>
                    //   <span className="question-type">{index+1}. 填空题</span>
                    //   <span className="question">{item.question}</span>
                    //   <p className="wrong">你的答案：{item.answer}</p>
                    //   <p className="right">正确答案：{item.rightAnswer}</p>
                    // </div>
                    return (
                      <div className="fill-blank error-item" key={index}>
                        <span className="question-type">{index+1}. 填空题</span>
                        <span className="question">{item.question}</span>
                        <div className="answer-con">
                          <p className="is-wrong">你的答案：{item.answer}</p>
                          <div className="right-answer">
                            <p>正确答案</p>
                            <p>{item.rightAnswer}</p>
                          </div>
                        </div>
                        {/* <div className="is-wrong"><p>你的答案：{item.answer}</p></div> */}
                        {/* <div className="is-right"><p>正确答案：{item.rightAnswer}</p></div> */}
                      </div>
                    )
                  }
                })
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}